<div class="row" style="margin-left: 1px; margin-top:10px; height: 50px;">
    <div class="col-md-6" style="margin-bottom: 10px;">
        <span style="font-size: 30px;font-weight: bold;">{{app}}</span>
    </div>
</div>

<div class="separator"></div>
<div class="container-fluid">
    <div class="row" style="margin-top: 20px; margin-bottom: 20px;">
        <div class="col-md-12">
            <div class="card">
                <div class="inputs-header">
                    <span class="brand" style="font-size: 13px;">集群限流</span>
                    <input class="form-control witdh-200" ng-model="searchKey" placeholder="机器搜索">
                    <div class="control-group" style="float:right;margin-right: 10px;margin-bottom: -10px;">
                        <selectize class="selectize-input-200" config="macsInputConfig" id="gsInput"
                                   ng-model="macInputModel" options="macsInputOptions"
                                   placeholder="机器"></selectize>
                    </div>
                </div>

                <!-- error panel -->
                <div class="row clearfix" ng-if="loadError">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <center>
                                    <p>{{loadError.message}}</p>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>

                <!--.tools-header -->
                <div class="card-body" ng-if="!loadError" style="padding: 0px 0px;">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">当前模式</label>
                            <p class="col-sm-6 control-label" ng-if="stateVO.currentMode == 0"
                               style="text-align: left; font-weight: normal;">Client</p>
                            <p class="col-sm-6 control-label" ng-if="stateVO.currentMode == 1"
                               style="text-align: left; font-weight: normal;">Server</p>
                            <p class="col-sm-6 control-label" ng-if="stateVO.currentMode == -1"
                               style="text-align: left; font-weight: normal;">未开启</p>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">集群限流模式变换</label>
                            <div class="col-sm-4">
                                <div align="center" class="form-control highlight-border">
                                    <input name="mode" ng-disabled="!stateVO.stateInfo.clientAvailable" ng-model='stateVO.stateInfo.mode' type="radio"
                                           value="0"/>&nbsp;Client&nbsp;&nbsp;
                                    <input name="mode" ng-disabled="!stateVO.stateInfo.serverAvailable" ng-model='stateVO.stateInfo.mode' type="radio"
                                           value="1"/>&nbsp;Server
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- no-cluster-mode-available-panel.start -->
                    <div ng-if="!stateVO.stateInfo.clientAvailable && !stateVO.stateInfo.serverAvailable">
                        <!-- error panel -->
                        <div class="row clearfix">
                            <div class="col-md-6 col-md-offset-3">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <center>
                                            <p>该机器未引入 Sentinel
                                                集群限流客户端或服务端的相关依赖，请引入相关依赖。</p>
                                        </center>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- no-cluster-mode-available-panel.stop -->

                    <div ng-if="stateVO.stateInfo.clientAvailable || stateVO.stateInfo.serverAvailable">
                        <div ng-if="stateVO.stateInfo.clientAvailable && stateVO.stateInfo.mode == 0">
                            <div ng-include="'app/views/cluster/client.html'"></div>
                        </div>
                        <div ng-if="stateVO.stateInfo.serverAvailable && stateVO.stateInfo.mode == 1">
                            <div ng-include="'app/views/cluster/server.html'"></div>
                        </div>

                        <div class="separator"></div>
                        <div clss="row" style="margin-top: 20px;">
                            <button class="btn btn-outline-success" ng-click="saveConfig()"
                                    style="margin: 0 10px 10px 10px;">保存配置
                            </button>
                        </div>
                    </div>

                </div>
                <!-- .card-body -->
            </div>
            <!-- .card -->
        </div>
        <!-- .col-md-12 -->
    </div>
    <!-- -->
</div>
<!-- .container-fluid -->
